<template>
  <div class="l-login" :style="`background-image: url('${imgUrl}');height:${height}px;`">
    <div class="login-layout">
      <div class="login-main">
          <el-row type="flex">
            <el-col :span="4">用户名:</el-col>
            <el-col :span="20"><el-input type="text" v-model="user.admin_name" /></el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="4">密&nbsp;&nbsp;&nbsp;码：</el-col>
            <el-col :span="20"><el-input type="password" v-model="user.admin_password" @keyup.enter.native="intLogin()" /></el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="4"></el-col>
            <el-col :span="20">
              <el-button type="primary" @click="intLogin()">LOGIN</el-button>
              <el-button type="warning">REGISTER</el-button>
            </el-col>
          </el-row>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
// import empty from './empty.vue'
// import { login } from '@/api/user'
// 
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('user')
export default {
  components: {
    //empty
  },
  props: {
    value: [Array, Object]
  },
  data() {
    return {
        height:null,
        imgUrl:require('@/assets/login.jpg'),

        user:{
          admin_name:'',
          admin_password:'',
        }
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.height = document.body.clientHeight;
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
      ...mapActions(['login']),
      intLogin(){
        var tips = '用户名为空';
        var ret = false;
        if(!this.user.admin_name){
          tips = '用户名不能为空！';
          ret = true;
        }else if(!this.user.admin_password){
          tips = '密码不能为空！';
          ret = true;
        }
        if(ret){
          this.$message({
            message: tips,
            type: 'warning'
          });
          return false;
        }


        let model = 'user';          //模块名
        let action = 'login';         //方法名
        var syntony = function(){           //回调函数
          this.$message({
            type: 'success',
            message: '登录成功！'
          });
        }

        var ert = this.login({
          model: model,
          action: action,
          userinfo: this.user,
          callback: syntony
        });

        return false
        return false
        /**
         * 管理员登录
         * @param  {[type]} response [description]
         * @return {[type]}          [description]
         */
        login(this.user).then(response => {
          if(response){
            console.log()
              this.$message({
                message: '登录成功！',
                type: 'success'
              });
            localStorage.setItem('user',JSON.stringify(response));
          }else{
              this.$message({
                message: '用户名或密码错误！',
                type: 'warning'
              });
          }
        })

      },

  }
}

</script>
<style type="text/css" lang="scss">
.l-login{
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content:center;
  align-items:center;
  .login-layout{
    width: 35%;
    margin:0px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    .login-main{
      padding: 50px;
      border-radius: 10px;
      background-color: rgba(255,255,255,0.9);
      .el-row--flex{
        align-items:center;
        margin-bottom: 15px;
        &:last-child{
          margin-bottom: 0px;
        }
      }
    }
  }
  
}
</style>
